<template>
  <div class="head">
    <van-tabbar v-model="activeTop">
      <van-tabbar-item to="/">推荐</van-tabbar-item>
      <van-tabbar-item to="/rank">排行</van-tabbar-item>
      <van-tabbar-item to="/category">分类</van-tabbar-item>
      <van-tabbar-item to="/search" icon="search"></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const activeTop = ref(0)

const tabRoutes = ['/', '/rank', '/category', '/search']

const ActiveTab = () => {
  const index = tabRoutes.indexOf(route.path)
  activeTop.value = index !== -1 ? index : 0
}
ActiveTab()
watch(() => route.path, ActiveTab)
</script>

<style lang="less" scoped>
.head {
  .van-tabbar--fixed {
    position: fixed;
    top: 0;
    // border-bottom: 1px solid #ccc;
    // color: #ffa500;
  }
}
:deep(.van-icon-search) {
  padding-top: 5px;
}
:deep(.van-tabbar) {
  background-color: transparent !important;
}

:deep(.van-tabbar-item) {
  // color: #fff !important;
  font-weight: bold;
}

:deep(.van-tabbar-item--active) {
  background-color: transparent !important;
  font-weight: bold;
  // color: #4F95FC !important;
  color: pink !important;
  font-size: 18px !important;
}
</style>
